4.0 Сценарии

Что такое JavaScript?

JavaScript — это высокоуровневый, интерпретируемый язык программирования, который используется для создания интерактивных веб-страниц. JavaScript позволяет добавлять динамическое поведение на сайты, такие как анимации, обработка пользовательских событий, взаимодействие с сервером и многое другое. JavaScript выполняется на стороне клиента (в браузере), но также может использоваться на стороне сервера (с помощью Node.js).

Основы работы с JavaScript

Подключение JavaScript к HTML

JavaScript можно подключить к HTML-документу с помощью тега <script>. Код JavaScript может быть встроен непосредственно в HTML или подключён как внешний файл.

Пример встроенного JavaScript:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример JavaScript</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <script>
        alert("Это сообщение из JavaScript!");
    </script>
</body>
</html>

Пример подключения внешнего файла JavaScript:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример JavaScript</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <script src="script.js"></script>
</body>
</html>

Основы синтаксиса JavaScript

1. Переменные

Переменные в JavaScript используются для хранения данных. Для объявления переменных используются ключевые слова let, const и var.

  • let — позволяет объявлять переменные, которые могут изменяться.
  • const — используется для объявления констант, значение которых нельзя изменить после инициализации.
  • var — устаревший способ объявления переменных (не рекомендуется к использованию в современном JavaScript).
let message = "Привет, мир!";
const PI = 3.14;
var oldVariable = "Устаревший способ";

2. Типы данных

JavaScript поддерживает несколько типов данных:

  • Числа (например, 42, 3.14).
  • Строки (например, "Привет, мир!").
  • Булевы значения (true или false).
  • Массивы (например, [1, 2, 3]).
  • Объекты (например, { name: "Иван", age: 30 }).
  • null и undefined.
let number = 42;
let text = "Это строка";
let isTrue = true;
let array = [1, 2, 3];
let person = { name: "Иван", age: 30 };

3. Операторы

JavaScript поддерживает различные операторы:

  • Арифметические операторы: +, -, *, /, %.
  • Операторы сравнения: ==, ===, !=, !==, >, <, >=, <=.
  • Логические операторы: &&, ||, !.
let sum = 10 + 5; // 15
let isEqual = (10 === "10"); // false
let isTrue = true && false; // false

4. Условные операторы

Условные операторы позволяют выполнять код в зависимости от условия.

  • if...else — выполняет код, если условие истинно.
  • switch — позволяет выбрать один из многих блоков кода для выполнения.
let age = 18;

if (age >= 18) {
    console.log("Вы совершеннолетний.");
} else {
    console.log("Вы несовершеннолетний.");
}

switch (age) {
    case 18:
        console.log("Вам ровно 18 лет.");
        break;
    default:
        console.log("Ваш возраст не равен 18.");
}

5. Циклы

Циклы позволяют повторять выполнение кода несколько раз.

  • for — выполняет код определённое количество раз.
  • while — выполняет код, пока условие истинно.
  • do...while — выполняет код хотя бы один раз, а затем проверяет условие.
for (let i = 0; i < 5; i++) {
    console.log("Итерация: " + i);
}

let i = 0;
while (i < 5) {
    console.log("Итерация: " + i);
    i++;
}

let j = 0;
do {
    console.log("Итерация: " + j);
    j++;
} while (j < 5);

Функции

Функции в JavaScript позволяют encapsulate код, который можно вызывать многократно. Функции могут принимать параметры и возвращать значения.

Пример функции:

function greet(name) {
    return "Привет, " + name + "!";
}

let greeting = greet("Иван");
console.log(greeting); // Привет, Иван!

Анонимные функции и стрелочные функции:

let greet = function(name) {
    return "Привет, " + name + "!";
};

let greetArrow = (name) => "Привет, " + name + "!";

Пред-практическое задание (Ссылка)

Практическое задание

  1. Создайте новый HTML-документ и подключите к нему JavaScript.
  2. Напишите программу, которая:
    • Запрашивает у пользователя его имя с помощью prompt.
    • Выводит приветствие с использованием alert.
    • Если пользователь ввёл пустую строку, выводит сообщение об ошибке.

Дополнительные задания:

  • Добавьте проверку возраста пользователя. Если возраст меньше 18, выведите сообщение "Вы несовершеннолетний.".
  • Используйте цикл for для вывода чисел от 1 до 10 в консоль.
  • Создайте функцию, которая принимает два числа и возвращает их сумму.

Заключение

JavaScript — это мощный язык программирования, который позволяет добавлять интерактивность на веб-страницы. Понимание основ синтаксиса, типов данных, операторов и функций является ключом к созданию динамических и функциональных веб-приложений. В следующих занятиях мы рассмотрим более сложные концепции, такие как работа с DOM, асинхронный JavaScript и многое другое.